<template>
	<el-dialog title="" width="900px" visible :show-close="false" :append-to-body="true" class="wrap" size="small">
		<i class="el-icon-close close" @click="cancel1" style="color: white;"></i>
		<div class="bt">班级信息</div>
		<el-form label-width="100px" class="form">
			<!--<div class="gn">-->
			<!--	<article class="settlement" style="float: left;">-->
			<!--<i class="el-icon-document" style="float: left;font-size:20px;margin-right: 10px;"></i>-->
			<!--<div class="gnmc" style="float: left;">基本信息</div>-->
			<!--<hr/>-->
			<!--<div class="left" style="width: 50%; float: left;">-->
			<el-button type="danger" class="submit" @click="cancel1">退出</el-button>
			<!--<el-button type="danger" class="submit" @click="jiesan">解散班级</el-button>-->
			<div>
				<div class="left" style="width: 50%;float: left;">
					<div class="left-one" style="width: 100%;float: left;margin-bottom: 10px;">
						<div class="bjmc" style=" margin: 0 auto;height: 30px;line-height: 30px;float: left;">
							<span style="float: left;">班级名称：</span>
							<input  type="text" v-model="form.mc" :readonly='xg' style="border: none;outline: none; width: 100px;border-bottom: 1px solid#CCCCCC;float:left;height: 28px;">
						</div>
						<el-button type="" size="mini" style="border: 0px;float: left;" @click="edit1" v-if="xg"> <i class="el-icon-edit"></i></el-button>
						<el-button type="primary" size="mini" style=" border: 0px;" @click="add" v-if="!xg">保存</el-button>
					</div>
					<div class="left-two" style="width: 100%;float: left;margin-bottom: 10px;">
						<div class="bjmc" style=" margin: 0 auto; height: 30px;line-height:30px; float: left;">
							<span style="float: left;">行政人员：</span>
							<input  type="text" v-model="form.xzlsmc" v-if="xg2" :readonly='true' style="border: none;outline: none;width: 100px; border-bottom: 1px solid#CCCCCC;float:left;height: 28px;">
							<el-select v-model="form.xzls" v-if="!xg2">
								<el-option :label="v.zwm" :value="v.id+''" v-for="v in xzlsList"></el-option>
							</el-select>

						</div>
						<el-button type="" size="mini" style="border:0px;float: left;" @click="edit2" v-if="xg2"> <i class="el-icon-edit"></i></el-button>
						<el-button type="primary" size="mini" style=" border: 0px;" @click="add" v-if="!xg2">保存</el-button>
					</div>
				</div>
				<div class="right" style="width: 50%;float: right;">
					<div class="right-one" style="width: 100%;float: left;margin-bottom: 10px;">
						<div class="bjmc" style=" margin: 0 auto; height: 30px;line-height: 30px; float: left;">
							<span style="float: left;">老师名称：</span><input  type="text" v-model="form.lsmc" :readonly='true' style="border: none; width: 100px;outline: none;border-bottom: 1px solid#CCCCCC;float:left;height: 28px;">
						</div>
						<el-button type="" size="mini" style="border: 0px;float: left;" @click="componentsShow('hls',params)"> <i class="el-icon-edit"></i></el-button>
					</div>

					<div class="right-two" style="width: 100%;float: left;margin-bottom: 10px;">
						<div class="bjmc" style=" margin: 0 auto; height: 30px;line-height: 30px; float: left;">
							<span style="float: left;">课程名称：</span>
							<input type="text" v-model="form.fxkcmc" :readonly='true' style="border: none; width: 100px;outline: none;border-bottom: 1px solid#CCCCCC;float:left;height: 28px;">
						</div>
					</div>
				</div>
			</div>
		
			<div class="anniu" style="float: left;width: 100%;">
				<i class="el-icon-setting" style="float: left;font-size:20px;margin-right: 10px;"></i>
				<div class="gnmc" style="float: left;">功能按钮</div>
				<br />
				<hr/>
			</div>
			<div class="htsz">
				
				<div class="top">
					<router-link :to="{path:'/educa/check',query: {iid:form.id,bjmc:form.mc,frompage:'xsadd'}}">
						<div class="tp" style="background:#50BFFF;color: white;"><i class="el-icon-setting" style="margin: 10px 0;font-size:23px;"></i><br><span style="font-size:16px ;">考勤</span></div>
					</router-link>
				</div>

				<div class="top"  @click='bjxs(form.id,form.mc)' >
					<router-link :to="{path:'/educa/class',query: {iid:form.id,bjmc:form.mc,frompage:'xsbjxs'}}">
						<div class="tp" style="background:#50BFFF;color: white;"><i class="el-icon-date" style="margin: 10px 0;font-size:23px;"></i><br><span style="font-size:16px ;">班级学生</span></div>
					</router-link>
				</div>
				<!--<div class="top" v-if="this.data"  @click='bjxs(form.id,form.mc)' >
					<router-link :to="{path:'/educa/class',query: {iid:form.id,mc:form.mc,frompage:'xsbjxs'}}">
						<div class="tp" style="background:#50BFFF;color: white;"><i class="el-icon-date" style="margin: 10px 0;font-size:23px;"></i><br><span style="font-size:16px ;">班级学生</span></div>
					</router-link>
				</div>
				<div class="top" v-if="!this.data" @click='bjxs(form.id,form.mc)'>
					<div class="tp" style="background:#50BFFF;color: white;"><i class="el-icon-date" style="margin: 10px 0;font-size:23px;"></i><br><span style="font-size:16px ;">班级学生</span></div>
				</div>-->

				<div class="top">
					<router-link :to="{path:'/educa/bklist',query: {iid:form.id,bjmc:form.mc,frompage:'xsbk'}}">
						<div class="tp" style="background:#50BFFF;color: white;"><i class="el-icon-setting" style="margin: 10px 0;font-size:23px;"></i><br><span style="font-size:16px ;">补课安排</span></div>
					</router-link>
				</div>

				<div class="top">
					<router-link :to="{path:'/educa/banji',query: {iid:form.id,bjmc:form.mc,frompage:'bjkb'}}">
						<div class="tp" style="background:#50BFFF;color: white;"><i class="el-icon-date" style="margin: 10px 0;font-size:23px;"></i><br><span style="font-size:16px ;">班级课表</span></div>
					</router-link>
				</div>

				<div class="top">
					<router-link :to="{path:'/educa/workcj',query: {iid:form.id,bjmc:form.mc,frompage:'xsadd'}}">
						<div class="tp" style="background:#50BFFF;color: white;"><i class="el-icon-date" style="margin: 10px 0;font-size:23px;"></i><br><span style="font-size:16px ;">作业分数</span></div>
					</router-link>
				</div>

				<div class="top">
					<router-link :to="{path:'/educa/kscj',query: {iid:form.id,bjmc:form.mc,frompage:'xsadd'}}">
						<div class="tp" style="background:#50BFFF;color: white;"><i class="el-icon-time" style="margin: 10px 0;font-size:23px;"></i><br><span style="font-size:16px ;">考试成绩</span></div>
					</router-link>
				</div>

				<div class="top">
					<router-link :to="{path:'/educa/tingshuozy',query: {iid:form.id,bjmc:form.mc,frompage:'xsadd'}}">
						<div class="tp" style="background:#50BFFF;color: white;"><i class="el-icon-edit" style="margin: 10px 0;font-size:23px;"></i><br><span style="font-size:16px ;">听说检查</span></div>
					</router-link>
				</div>

				<div class="top">
					<router-link :to="{path:'/educa/fyfx',query: {iid:form.id,bjmc:form.mc,frompage:'xsadd'}}">
						<div class="tp" style="background:#50BFFF;color: white;"><i class="el-icon-star-off" style="margin: 10px 0;font-size:23px;"></i><br><span style="font-size:16px ;">发音分析</span></div>
					</router-link>
				</div>

				<div class="top">
					<router-link :to="{path:'/educa/msgbj',query: {iid:form.id,bjmc:form.mc,frompage:'xsadd'}}">
						<div class="tp" style="background:#50BFFF;color: white;"><i class="el-icon-message" style="margin: 10px 0;font-size:23px;"></i><br><span style="font-size:16px ;">班级通知</span></div>
					</router-link>
				</div>
				<div class="top"  >
					<!--@click='sj(form.id,form.mc)'-->
					<router-link :to="{path:'/educa/class',query: {iid:form.id,bjmc:form.mc,frompage:'xsaddsj',ysj:'ysj'}}">
						<div class="tp" style="background:#50BFFF;color: white;"><i class="el-icon-document" style="margin: 10px 0;font-size:23px;"></i><br><span style="font-size:16px ;">预升级</span></div>
					</router-link>
				</div>
				<div class="top" >
					<router-link :to="{path:'/educa/xsjtzy',query: {iid:form.id,bjmc:form.mc,frompage:'xsjtzy',}}">
						<div class="tp" style="background:#50BFFF;color: white;"><i class="el-icon-document" style="margin: 10px 0;font-size:23px;"></i><br><span style="font-size:16px ;">家庭作业</span></div>
					</router-link>
				</div>
				
				<div class="top" >
					<router-link :to="{path:'/educa/class',query: {iid:form.id,bjmc:form.mc,frompage:'xsbjrz'}}">
						<div class="tp" style="background:#50BFFF;color: white;"><i class="el-icon-document" style="margin: 10px 0;font-size:23px;"></i><br><span style="font-size:16px ;">班级日志</span></div>
					</router-link>
				</div>
				
			</div>
			
			</div>
		</el-form>
		<HlsComponent v-if="portComponents.hls.toggle" @close="componentsHide" :params="this.form"></HlsComponent>
		<DaikeComponent v-if="classtable" @close="showdaike" :params="this.sjdlist"></DaikeComponent>
        <SjComponent v-if="portComponents.sj.toggle" @close="componentsHide" :params="portComponents.sj.params"></SjComponent>
        <StudentComponent v-if="portComponents.student.toggle" @close="componentsHide" :params="portComponents.student.params"></StudentComponent>
		<Czkb v-if="showczkblist" @close="cloczkb" :params="this.form" ></Czkb>
	</el-dialog>
</template>
<script type="text/javascript">
	import qs from 'qs'
	import HlsComponent from './hls'
    import StudentComponent from './student/list'
    import SjComponent from './sj'
	import DaikeComponent from '@/view/educa/banjicourse/edit'
	import Czkb from '@/view/admin/yushebjManage/czkb'
	export default {
		props: ['params' , 'data'],
		components: {
			HlsComponent,
			DaikeComponent,
			Czkb,
			StudentComponent,
			SjComponent
		},
		data() {
			return {
				showczkblist: false,
				showkblist:true,
				classtable: false,
				sjdlist:'',
				form: {
					mc: '',
					lsmc: '',
					lsid: '',
					cmc: '',
					jcmc: '',
					isqy: '',
					xzlsmc: '',
					fxkcmc: '',
					fxkcid: '',
					id: '',
					xzid: '',
					xzls:'',
				},
				kblistul:[],
				xg: true,
				xg2: true,
				xzlsList: [],
				/*组件区域*/
				portComponents: {
					/* 换老师*/
					hls: {
						type: 'hls',
						toggle: false,
						params: '',
						data: {}
					},
					student: {
                        type: 'student',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    sj: {
                        type: 'sj',
                        toggle: false,
                        params: '',
                        data: {}
                    },

				},
			}
		},
		created() {
//			console.log(this.params,'ssssssssssss')
//			console.log(this.data,'ssssss2222ssssss')
        
			if(this.params.id) {
				this.form.id1 = this.params.id;
			}
			if(this.params.row){
				this.form.id1 = this.params.row.id;
			}
			this.loadinfo();
			this.getkblist()
			this.getxzlsList();
		},
		methods: {
			czkb() {
				this.showczkblist = true;
			},
			cloczkb() {
				this.showczkblist = false;
				if(this.params.id) {
					this.form.id1 = this.params.id;
				} else {
					this.form.id1 = this.params.row.id;
				}
				this.getkblist()
			},
			daike(list){
				this.sjdlist = list
				this.classtable = true
			},
			showdaike(){
				this.classtable = false
				if(this.params.id) {
					this.form.id1 = this.params.id;
				} else {
					this.form.id1 = this.params.row.id;
				}
				this.getkblist()
			},
//			ckkb(){
//				this.showkblist = !this.showkblist
//			},
			getxzlsList() {
				var logininfo = JSON.parse(localStorage.logininfo);
				var params2 = qs.stringify({
					xxid: logininfo.xxid
				})
				//执行
				this.axios.post(this.$store.state.api + 'ls/mc', params2)
					.then(res => {
						this.xzlsList = res.data.data;
					}).catch(res => {
					})
			},
			getkblist(){
				var logininfo = JSON.parse(localStorage.logininfo);
				var params2 = qs.stringify({
					xxid: logininfo.xxid,
					yhid: logininfo.id,
					bjid: this.form.id1,
					isys: 'N',
				})
				//执行
				this.axios.post(this.$store.state.api + 'ysbj/getbjkb', params2)
					.then(res => {
						this.kblistul = res.data.data.aa
					}).catch(res => {
						this.$message.danger("服务器异常");
						this.$store.state.loading = false;
					})
			},
			loadinfo() {
				var logininfo = JSON.parse(localStorage.logininfo);
				var params2 = qs.stringify({
					xxid: logininfo.xxid,
					yhid: logininfo.id,
					id: this.form.id1
				})
				//执行
				this.axios.post(this.$store.state.api + 'bj/info', params2)
					.then(res => {
						console.log(res,'iiiii')
						this.form = res.data.data
						this.zsbjid=res.data.data.id
					}).catch(res => {
						this.$message.danger("服务器异常");
						this.$store.state.loading = false;
					})
			},
			jiesan() {
				this.$confirm('此操作将解散该班级, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var logininfo = JSON.parse(localStorage.logininfo);
					var params2 = qs.stringify({
						yhid: logininfo.id,
						xxid: logininfo.xxid,
						zsbjid:this.zsbjid
					})
					//执行
					this.axios.post(this.$store.state.api + 'ysbj/zsbjjs', params2)
						.then(res => {
							if(res.data.code == '1') {
								this.$emit('close', {type: 'edit',cancel: false});
								this.$message.warning(res.data.msg)
								this.cancel()
							} else {
								this.$message.warning(res.data.msg)
							}
						}).catch(res => {
							console.log(res)
							this.searchLoading = false;
						})
				}).catch(() => {
					this.$message({type: 'info',message: '已取消'});
				});
			},
			edit1() {
				this.xg = false;
			},
			edit2() {
				this.xg2 = false;
			},
			add() {
				this.xg = true;
				this.$store.state.loading = true;
				//装载数据
				var logininfo = JSON.parse(localStorage.logininfo);
				var params2 = qs.stringify({
					id: this.form.id + '',
					mc: this.form.mc + '',
					xzid: this.form.xzls+'',
					yhid: logininfo.id + '',
					xxid: logininfo.xxid + ''
				})
				//执行
				this.axios.post(this.$store.state.api + 'bj/update', params2)
					.then(res => {
						if(res.data.code == 1) {
							this.$emit('close', {type: 'edit',cancel1: false});
							this.xg2 = true;
							this.$message.success("保存成功!");
							this.$store.state.loading = false;
						} else {
							this.$message.warning(res.data.msg);
							this.$store.state.loading = false;
						}
					}).catch(res => {
						this.$message.danger("服务器异常");
						this.$store.state.loading = false;
					})
			},
			bjxs(id,mc){
				this.$emit('close', {
					type: 'edit',
					cancel1: true,
				})
			},
			sj(id,mc){
				this.$emit('close', {
					type: 'edit',
					cancel1: true,
				})
			},
			cancel1() {
				this.$emit('close', {
					type: 'edit',
					cancel1: true
				})
			},
			/* 组件的弹框  */
			componentsShow(type, data) { //显示组件
					for(let i in this.portComponents) {
					if(type == this.portComponents[i].type) {
						this.portComponents[i].toggle = true;
						this.portComponents[i].params = data;
						return;
					}
				}
			},
			componentsHide(setting) { //关闭组件
				if(this.params.id) {
				this.form.id1 = this.params.id;
			} else {
				this.form.id1 = this.params.row.id;
			}
				this.loadinfo();
				for(let i in this.portComponents) {
					if(setting.type == this.portComponents[i].type) {
						this.portComponents[i].toggle = false;
						if(!setting.cancel1) {
							this.loadinfo();
							//                         this.add();
						}
						return;
					}
				}
			}

		}
	}
</script>
<style lang="less" scoped>
	.wrap {
		text-align: center;
	}
	.red{
			background: #C0CCDA;
		}
		.red2{
			background: #fff;
		}
	.kblistul{
			width: 97%;
			text-align: center;
			margin: 0 auto;
			border: 1px solid;
			overflow: hidden;
			li{
				width: 12.5%;
				height: 100px;
				border: 1px solid;
				float: left;
			}
		}
	.bt {
		position: absolute;
		width: 100%;
		height: 50px;
		margin: 0 auto;
		top: 0;
		background: #50BFFF;
		left: 0;
		color: white;
		text-align: left;
		line-height: 50px;
		font-size: 17px;
		padding-left: 15px;
	}
	
	.close {
		z-index: 10;
		position: absolute;
	}
	
	.form {
		text-align: left;
		margin-top: 10px;
		overflow: hidden;
	}
	
	.input {
		width: 300px;
		display: inline-block;
	}
	
	.space-between {
		padding: 10px 0;
		display: block;
	}
	
	.select-block {
		width: 85%;
		display: block;
	}
	
	.submit {
		width: 80px;
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		padding: 0px;
		text-align: center;
		margin-bottom: 5px;
	}
	
	.gn {
		width: 100%;
		height: 100%;
		float: left;
	}
	
	.aa {
		width: 70%;
	}
	
	.anniu1 {
		display: flex;
		justify-content: space-around;
		flex-flow: wrap;
		float: left;
	}
	
	.top {
		width: 15%;
		height: 80px;
		float: left;
		border-radius: 8px;
		margin-right: 15px;
		margin-top: 10px;
		margin-bottom: 10px;
		background: white;
		position: relative;
		box-shadow: 7px 7px 7px #B3B3B3;
		border-radius: 8px;
	}
	
	.tp {
		width: 100%;
		height: 80px;
		float: left;
		border-radius: 8px;
		background: white;
		position: relative;
		box-shadow: 7px 7px 7px #B3B3B3;
		border-radius: 8px;
	}
	
	.htsz {
		display: flex;
		justify-content: space-around;
		flex-flow: wrap;
		width: 100%;
		height: 100%;
		margin: 0 auto;
		float: left;
		/*margin-top: 52px;*/
		/*		margin-bottom: 10px;*/
		color: white;
		text-align: center;
		font-size: 16px;
		/*		background: white;*/
		/*		border-top: 3px solid deepskyblue;*/
	}
</style>